<template>
  <div>
    <el-card shadow="hover" class="card_tow">
      <template #header>
        <div class="card_two_header">
          <div class="left">
            <!-- 医保 -->
            <SvgIcon
              v-if="patient.isInsure == 1"
              name="insurance"
              style="width: 18px; height: 18px"
            />
            <!-- 自费 -->
            <SvgIcon
              v-else
              name="no-insurance"
              style="width: 18px; height: 18px"
            />
            <span style="margin-left: 5px; color: #1096db">
              {{ patient.isInsure == 1 ? '医保' : '自费' }}
            </span>
            <!-- 就诊人姓名 -->
            <span style="margin-left: 10px; font-size: 18px">
              {{ patient.name }}
            </span>
          </div>
          <div class="right">
            <SvgIcon
              name="edit"
              style="width: 18px; height: 18px"
              @click="editPatient"
            />
            <SvgIcon
              name="delete"
              style="width: 18px; height: 18px; margin-left: 20px"
              v-show="route.name == 'patient'"
              @click="open(patient.name)"
            />
          </div>
        </div>
      </template>
      <!-- 就诊人信息 -->
      <div class="content">
        <ul>
          <li>
            <p>
              <span style="color: #556">证件类型：</span>
              {{ patient.param.certificatesTypeString }}
            </p>
          </li>
          <li>
            <p>
              <span style="color: #556">证件号码：</span>
              {{ patient.certificatesNo }}
            </p>
          </li>
          <li>
            <p>
              <span style="color: #556">用户性别：</span>
              {{ patient.sex == 1 ? '男' : '女' }}
            </p>
          </li>
          <li>
            <p>
              <span style="color: #556">出生日期：</span>
              {{ patient.birthdate }}
            </p>
          </li>
          <li>
            <p>
              <span style="color: #556">手机号码：</span>
              {{ patient.phone }}
            </p>
          </li>
          <li>
            <p>
              <span style="color: #556">婚姻状况：</span>
              {{ patient.isMarry == 1 ? '已婚' : '未婚' }}
            </p>
          </li>
          <li>
            <p>
              <span style="color: #556">当前住址：</span>
              {{ patient.address }}
            </p>
          </li>
          <li>
            <p>
              <span style="color: #556">详细地址：</span>
              {{ patient.param.fullAddress }}
            </p>
          </li>
        </ul>
        <!-- 已选择盒子 -->
        <div class="confirm" :class="{ active: isSelected }">已选择</div>
        <!-- <transition name="confirm">
          <div class="confirm" v-show="isSelected">已选择</div>
        </transition> -->
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="PatientCard">
import usePatientStore from '@/store/modules/patient'
import { Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { storeToRefs } from 'pinia'
import { markRaw } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 获取父组件传递的就诊人的信息和当前卡片是否被选选中的标识
const patientInfo = defineProps(['patient', 'isSelected'])
// 获取路由对象
const route = useRoute()
// 获取路由器对象
const router = useRouter()
// 获取就诊人仓库
const patientStore = usePatientStore()
// 获取仓库中控制场景切换的值,仓库中存储的当前要修改的就诊人信息
const { scene, patientData } = storeToRefs(patientStore)
const { deletePatient } = patientStore

// 点击编辑按钮的回调
const editPatient = () => {
  // 切换场景值
  scene.value = 1
  // 存储当前就诊人信息到仓库中
  patientData.value = patientInfo.patient
  // 路由跳转到就诊人管理页面(在挂号页点击编辑按钮)
  router.push({
    name: 'patient',
    query: {
      redirect: route.fullPath,
    },
  })
}
// 点击删除按钮的消息弹出框
const open = (name: string) => {
  ElMessageBox.confirm(`你确定要删除"${name}"该就诊人吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error',
    icon: markRaw(Delete),
  })
    .then(() => {
      // 通知仓库删除就诊人信息
      deletePatient(patientInfo.patient.id)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
</script>

<style scoped lang="scss">
.card_tow {
  color: $base-color;
  width: 300px;
  height: 400px;
  margin-bottom: 20px;
  :deep(.el-card__header) {
    background-color: #f5f7fa;
  }
  .card_two_header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
  .content {
    position: relative;
    ul {
      li {
        margin-bottom: 8px;
        p {
          line-height: 25px;
        }
      }
    }
    // 选择效果
    .confirm {
      position: absolute;
      width: 50px;
      height: 50px;
      font-size: 10px;
      color: $base-active-color;
      text-align: center; // 水平居中
      line-height: 50px; // 垂直居中
      border: 1.2px dashed $base-active-color;
      border-radius: 50%; // 变为圆
      opacity: 0; // 不透明度为零(隐藏)
      top: calc(50% - 25px); // 通过定位将其左上角移动到盒子中心
      left: calc(50% - 25px);
      // transform: translate(-50%, -50%); // 或通过定位+平移移动到盒子中心
      // 添加激活时的过渡动画
      &.active {
        opacity: 0.8; // 透明度为0.8让其显示
        transform: scale(4) rotate(45deg); // 放大到4倍并旋转45度
        transition: all ease-in-out 0.8s; // 过渡动画
      }
    }
    // .confirm-enter-from {
    //   transform: scale(1); // 初始状态
    // }
    // .confirm-enter-active {
    //   transition: all linear 0.3s; // 过渡动画
    // }
    // .confirm-enter-to {
    //   opacity: 0.8;
    //   transform: scale(4) rotate(45deg); // 结束状态
    // }
  }
  &:hover {
    cursor: pointer;
  }
}
</style>
